<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" :collapse="$store.state.homeview.navBool" @open="handleOpen" @close="handleClose" router>
        <!-- 添加router属性 就是element提供的根据列表的index属性当成页面跳转路径 -->
        <!-- 循环路由数据   并且判断是否有二级菜单 -->
        <template v-for="(v, i) in router.options.routes[2].children" :key="v.path">
            <!-- 111111111111111设置index为path路径 -->
            <!-- 带下拉的导航 -->
            <el-sub-menu :index="v.path" v-if="v.children">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <!-- 添加展示数据 -->
                    <span>{{ v.meta.title }}</span>
                </template>
                <!-- 循环二级菜单 -->
                <el-menu-item-group v-for="(val, index) in v.children" :key="val.path">
                    <el-menu-item :index="val.path">{{ val.meta.title }}</el-menu-item>
                    <!-- <el-menu-item index="1-2">item one</el-menu-item> -->
                </el-menu-item-group>
            </el-sub-menu>
            <!-- 不带下拉的列表 -->
            <el-menu-item :index="v.path" v-else>
                <el-icon>
                    <setting />
                </el-icon>
                <!-- 添加展示数据 -->
                <span>{{ v.meta.title }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>
<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { onMounted } from "vue"
// 获取路由信息
import { useRouter } from "vue-router";
// import router from '../router/index';
const router = useRouter();
onMounted(() => {
    console.log(router.options.routes[2].children, "路由")
})
// 获取路由信息
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>